<template>
  <div ref="chartDom" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import * as echarts from 'echarts';

// 创建一个响应式引用来保存DOM元素
const chartDom = ref(null);
let chartInstance = null;
const props = defineProps({
  title: {
    type: String,
  },
  echarsData: {
    type: Object,
    required: true,
  },
});
const option = ref({
  title: {
    text: '1112',
    top: 0,
    textStyle: {
      color: '#999',
      fontSize: 12,
      fontWeight: '400',
    },
  },
  tooltip: {
    trigger: 'axis',
  },
  grid: {
    left: '3%', // 调整左边距
    right: '3%', // 调整右边距
    bottom: '3%', // 调整底部边距
    top: '15%', // 调整顶部边距
    containLabel: true, // 确保标签和轴标题被包含在容器内
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [], // 示例数据
    axisLine: {
      show: false, // 不显示横坐标轴线
    },
    axisTick: {
      show: false, // 不显示刻度线
    },
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}',
    },
  },
  series: [
    {
      name: '销售额',
      type: 'line',
      data: [], // 示例数据，模拟起伏更大
      smooth: true, // 折线平滑
      lineStyle: {
        width: 2,
        color: 'rgb(40,90,250)',
      },
      symbolSize: (value, params) => {
        // 获取数据系列的长度
        // const seriesLength = option.series[0].data.length;
        // 中间节点放大
        if (params.dataIndex === Math.floor(seriesLength / 2)) {
          return 8; // 中间节点的大小
        }
        return 8; // 其他节点的大小
      },
    },
  ],
});
const renderChart = async () => {
  chartInstance = echarts.init(chartDom.value);
  chartInstance.setOption(option.value);
};
watch(
  () => props.echarsData,
  (e) => {
    option.value.xAxis.data = e[0];
    option.value.series[0].data = e[1];
    renderChart();
  },
  { deep: true }
);
// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
onMounted(() => {
  nextTick(() => {
    renderChart();
  });
});

// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>

<style scoped>
/* 添加一些CSS样式来美化图表容器（可选） */
</style>
